<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <!-- 1、遍历元素 -->
            <li v-for="user in users">
                {{user.name}} - {{user.gender}} - {{user.age}}
            </li>
            
            <!-- 2、数组角标，从0开始 -->
            <li v-for="(user,index) in users">
                {{index + 1}}.{{user.name}} - {{user.gender}} - {{user.age}}
            </li>

            <!-- 3、遍历对象 -->
            <li v-for="(value,key,index) in user2">
                {{index + 1}} - {{key}} - {{value}}
            </li>

            <!-- 4、key,标识数据的唯一标识 -->
            <li v-for="user in users" :key="user.uid">
                {{user.uid}}-{{user.name}} - {{user.gender}} - {{user.age}}
            </li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js">
    </script>
    <script type="text/javascript">
        let vm = new Vue({
            el: "#app",
            data: {
                user2: { id:1243424, name: '古力娜扎', gender: '女', age: 25 },
                users: [
                    {uid:2351, name: '柳岩', gender: '女', age: 21 }, 
                    {uid:2124, name: '张三', gender: '男', age: 18 }, 
                    {uid:3231, name: '范冰冰', gender: '女', age: 24 }, 
                    {uid:3531, name: '刘亦菲', gender: '女', age: 18 }, 
                    {uid:3229, name: '古力娜扎', gender: '女', age: 25 }
                ]
            }
        })         
    </script>
</body>
</html>